<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas的使用</title>
</head>
<body>
    <canvas id="canvas" width="300" height="500" style="border:2px solid black;"></canvas>
</body>


<script>
    //通过id获取对象
    var canvas = document.getElementById('canvas');
    //通过对象获取 2d的对象（用于绘制图案），也就相当于画笔对象
    var ctx = canvas.getContext('2d');


    /* 绘制步骤
    * 1.生成路径，新建一条路径   ctx.beginPath()
    * 2.moveTo移动笔触，设置起始点，把笔触移动到那里去， 通过ctx.moveTo(x,y)
    * 3.开始绘制：线段，圆，矩形。。。
    * 4.设置样式
    * 5.描边（只是描边,不能自动闭合路径，需要通过closePath()来闭合），填充（直接填充，能自动闭合路径），描边和填充
    *       stroke          fill            stroke & fill
    * 6.画线
    * 
    * 
    * 
    */
    //新建一条路径
    ctx.beginPath();
      
    //起始点
    ctx.moveTo(50, 80);
      
    //结束点
    ctx.lineTo(100,120);
    //设置样式
    //颜色
    ctx.strokeStyle='#f00';
    //线宽
    ctx.lineWidth=5;
    //闭合线段
    ctx.closePath();
    //[设置样式]，描边
    ctx.stroke();

    // 画第二条线
    //1.新建一条路径
    ctx.beginPath();
    //2.设置起始点
    ctx.moveTo(100,100);
    //3.设置终止点
    ctx.lineTo(100,200);
    //4.设置样式
    ctx.lineWidth=10;
    ctx.strokeStyle='blue';
    //5.描边（必不可少）
    ctx.stroke();
</script>
</html>